import React, { memo, useEffect, useState, useRef } from 'react';
import { Form, Input, Table, Modal, DatePicker, Space, Popconfirm } from 'antd';
import { ProToolBar } from '@/base-ui';
import { IToolButton } from '@/base-ui/tool-bar';
import http from '@/services/request';
import TipsHeader from '@/components/TipsHeader';
import planPicture from '@/assets/img/chicken_flu_shot.jpg';

import { FormColumns } from './config';
import DivWrapper from './style';

//form
const NewForm = (props: any) => {
  return (
    <Form ref={props.newref} layout={'vertical'}>
      <Form.Item label="疫苗接种剂次" name="vaccinationDosage">
        <Input width={300} />
      </Form.Item>
      <Form.Item name="vaccinationHenhouseQuantity" label="接种该疫苗的鸡舍数">
        <Input width={300} />
      </Form.Item>
      <Form.Item label="接种该疫苗的肉鸡总数" name="vaccinationTotal">
        <Input width={300} />
      </Form.Item>
      <Form.Item label="未接种该疫苗的肉鸡总数" name="undoVaccinationTotal">
        <Input width={300} />
      </Form.Item>
      <Form.Item label="截止时间" name="deadline">
        <DatePicker />
      </Form.Item>
    </Form>
  );
};

const GetUseManage = memo(() => {
  const [dataSource, setdataSource]: any = useState([]);
  const [addModalVisible, setAddModalVisible] = useState(false);
  const [edited, setEdited]: any = useState('');
  const newref: any = useRef();
  const [form] = Form.useForm();
  const buttonGroup: IToolButton[] = [
    {
      type: 'create',
      text: '新增记录',
      isShow: true,
      onClick: () => {
        setAddModalVisible(true);
      },
      id: 9
    }
  ];

  const ForumColum = [
    ...FormColumns,
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 150,
      render: (_: any, record) => (
        <Space>
          <a onClick={() => openEditModal(record)}>编辑</a>
          <Popconfirm
            title="确定删除?"
            okText="确认"
            cancelText="取消"
            // cancelButtonProps={{ size: 'middle' }}
            onConfirm={() => deleteItem(record.id)}
          >
            <a style={{ color: '#ff4d4f' }}>删除</a>
          </Popconfirm>
        </Space>
      ),
      fixed: 'right'
    }
  ];

  useEffect(() => {
    http.get('/feed/vaccinationSummaryFarming/list/1/10').then((res) => {
      setdataSource(res.data?.records);
    });
  }, []);

  const openEditModal = (item) => {
    setEdited(item);
    setAddModalVisible(true);
    const { deadline, ...rest } = item;
    form.setFieldsValue(rest);
  };

  // 对话框确认
  const handleAddModalOk = () => {
    setAddModalVisible(false);
    // 修改操作
    if (edited) {
      const newedited = newref.current.getFieldsValue();
      http
        .put(`/feed/vaccinationSummaryFarming/update`, {
          id: edited.id,
          ...newedited
        })
        .then(() => {
          http.get('/feed/vaccinationSummaryFarming/list/1/30').then((res) => {
            setdataSource(res.data.records);
          });
        });
      setEdited(null);
      return;
    }

    //id不在--就是新增
    const addData = newref.current.getFieldsValue();
    const {
      vaccinationDosage,
      vaccinationHenhouseQuantity,
      vaccinationTotal,
      undoVaccinationTotal,
      deadline
    } = addData;

    http
      .post('/feed/vaccinationSummaryFarming/save', {
        vaccinationDosage,
        vaccinationHenhouseQuantity,
        vaccinationTotal,
        undoVaccinationTotal,
        deadline
      })
      .then(() => {
        http.get('/feed/vaccinationSummaryFarming/list/1/10').then((res) => {
          setdataSource(res.data.records);
        });
      })
      .catch((error) => {
        // eslint-disable-next-line no-console
        console.log(error);
      });
  };

  // 对话框取消
  const handleAddModalCancel = () => {
    setAddModalVisible(false);
    setEdited(false);
    form.resetFields();
  };

  const deleteItem = (id) => {
    http.delete(`/feed/vaccinationSummaryFarming/delete/${id}`).then(() => {
      http.get('/feed/vaccinationSummaryFarming/list/1/10').then((res) => {
        setdataSource(res.data.records);
      });
    });
  };

  const renderDescription = () => (
    <>
      <p>
        疫苗注射记录是养殖管理系统中的一个重要部分，它用于记录禽畜接种疫苗的情况，以便于您进行跟踪和管理。{' '}
      </p>
    </>
  );

  return (
    <DivWrapper>
      <TipsHeader
        imgSrc={planPicture}
        title="疫苗注射记录"
        description={renderDescription()}
      />
      <ProToolBar buttonGroup={buttonGroup} />
      <Table
        dataSource={dataSource}
        columns={ForumColum}
        scroll={{ x: 1300 }}
      />
      <Modal
        width={'800px'}
        title="新增记录"
        visible={addModalVisible}
        onOk={handleAddModalOk}
        onCancel={handleAddModalCancel}
        centered
      >
        <NewForm newref={newref} form={form} />
      </Modal>
    </DivWrapper>
  );
});

export default GetUseManage;
